<template>
  <div class="statistics-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="card-header">
            <span>营业额统计</span>
            <el-radio-group v-model="salesTimeRange" size="small">
              <el-radio-button label="week">近7天</el-radio-button>
              <el-radio-button label="month">近30天</el-radio-button>
              <el-radio-button label="year">近一年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <!-- 这里可以放置图表组件 -->
            <div class="placeholder-chart">营业额统计图表</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="card-header">
            <span>用户统计</span>
            <el-radio-group v-model="userTimeRange" size="small">
              <el-radio-button label="week">近7天</el-radio-button>
              <el-radio-button label="month">近30天</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <!-- 这里可以放置图表组件 -->
            <div class="placeholder-chart">用户统计图表</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="card-header">
            <span>订单统计</span>
            <el-radio-group v-model="orderTimeRange" size="small">
              <el-radio-button label="week">近7天</el-radio-button>
              <el-radio-button label="month">近30天</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <!-- 这里可以放置图表组件 -->
            <div class="placeholder-chart">订单统计图表</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="card-header">
            <span>销量排行榜</span>
            <el-select v-model="rankType" size="small" style="width: 120px;">
              <el-option label="菜品销量榜" value="dish"></el-option>
              <el-option label="套餐销量榜" value="setmeal"></el-option>
            </el-select>
          </div>
          <el-table
            :data="rankList"
            style="width: 100%"
            :show-header="false">
            <el-table-column width="80">
              <template slot-scope="scope">
                <div class="rank-item">
                  <div :class="['rank-number', scope.row.rank <= 3 ? 'top-rank' : '']">{{ scope.row.rank }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <div class="rank-info">
                  <span class="rank-name">{{ scope.row.name }}</span>
                  <el-progress 
                    :percentage="scope.row.percentage" 
                    :color="scope.row.rank <= 3 ? '#f56c6c' : '#409eff'" 
                    :show-text="false"
                    :stroke-width="15">
                  </el-progress>
                  <span class="rank-value">{{ scope.row.value }}{{ rankType === 'dish' ? '份' : '份' }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Statistics',
  data() {
    return {
      // 时间范围选择
      salesTimeRange: 'week',
      userTimeRange: 'week',
      orderTimeRange: 'week',
      // 排行榜类型
      rankType: 'dish',
      // 排行榜数据
      rankList: [
        { rank: 1, name: '宫保鸡丁', value: 324, percentage: 100 },
        { rank: 2, name: '鱼香肉丝', value: 287, percentage: 88 },
        { rank: 3, name: '麻婆豆腐', value: 234, percentage: 72 },
        { rank: 4, name: '水煮鱼', value: 198, percentage: 61 },
        { rank: 5, name: '北京烤鸭', value: 176, percentage: 54 },
        { rank: 6, name: '糖醋排骨', value: 165, percentage: 51 },
        { rank: 7, name: '回锅肉', value: 154, percentage: 47 },
        { rank: 8, name: '小炒肉', value: 142, percentage: 44 },
        { rank: 9, name: '红烧肉', value: 136, percentage: 42 },
        { rank: 10, name: '酸菜鱼', value: 128, percentage: 39 }
      ]
    }
  },
  watch: {
    // 监听排行榜类型变化
    rankType(newVal) {
      if (newVal === 'setmeal') {
        this.rankList = [
          { rank: 1, name: '商务套餐A', value: 156, percentage: 100 },
          { rank: 2, name: '商务套餐B', value: 142, percentage: 91 },
          { rank: 3, name: '家庭欢乐套餐', value: 121, percentage: 78 },
          { rank: 4, name: '情侣套餐', value: 98, percentage: 63 },
          { rank: 5, name: '豪华套餐', value: 87, percentage: 56 },
          { rank: 6, name: '经济套餐', value: 76, percentage: 49 },
          { rank: 7, name: '午市套餐', value: 65, percentage: 42 },
          { rank: 8, name: '晚市套餐', value: 54, percentage: 35 },
          { rank: 9, name: '节日特供套餐', value: 43, percentage: 28 },
          { rank: 10, name: '儿童套餐', value: 32, percentage: 21 }
        ]
      } else {
        this.rankList = [
          { rank: 1, name: '宫保鸡丁', value: 324, percentage: 100 },
          { rank: 2, name: '鱼香肉丝', value: 287, percentage: 88 },
          { rank: 3, name: '麻婆豆腐', value: 234, percentage: 72 },
          { rank: 4, name: '水煮鱼', value: 198, percentage: 61 },
          { rank: 5, name: '北京烤鸭', value: 176, percentage: 54 },
          { rank: 6, name: '糖醋排骨', value: 165, percentage: 51 },
          { rank: 7, name: '回锅肉', value: 154, percentage: 47 },
          { rank: 8, name: '小炒肉', value: 142, percentage: 44 },
          { rank: 9, name: '红烧肉', value: 136, percentage: 42 },
          { rank: 10, name: '酸菜鱼', value: 128, percentage: 39 }
        ]
      }
    }
  },
  methods: {
    // 这里可以添加方法来获取统计数据
  }
}
</script>

<style scoped>
.statistics-container {
  padding: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

.placeholder-chart {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 18px;
}

.rank-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #909399;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.top-rank {
  background-color: #f56c6c;
}

.rank-info {
  display: flex;
  align-items: center;
}

.rank-name {
  width: 120px;
  margin-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-progress {
  width: 60%;
  margin-right: 20px;
}

.rank-value {
  width: 60px;
  text-align: right;
  color: #606266;
  font-weight: bold;
}
</style>